<template>
  <div
    v-loading="loading"
    v-empty="nopermission"
    class="rc-cont"
    xs-empty-icon="nopermission"
    :xs-empty-text="$t('crm.components.8035e5dd34b3734f8ad8715f2cf95e0e')">
    <flexbox v-if="!isSeas" class="rc-head" direction="row-reverse">
      <el-button v-if="contactsSave" icon="el-icon-plus" @click="createClick">
        {{ $t('crm.components.365c53afbbb9073e871a09d80798840b') }}
      </el-button>
    </flexbox>
    <el-table
      v-show="fieldList.length > 0"
      :data="list"
      :height="tableHeight"
      class="table"
      stripe>
      <el-table-column
        v-for="(item, index) in fieldList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :formatter="fieldFormatter"
        resizable
        show-overflow-tooltip />
      <el-table-column
        :label="$t('crm.components.04eb2020f70b1e1bac041950faa0f3cf')"
        width="230">
        <template slot-scope="scope">
          <flexbox v-if="!isSeas" justify="space-between">
            <span v-if="scope.row.isMain==1" class="chief">
              <i class="wk wk-success" />
              {{ $t('crm.components.3117184e88a7b64240d1329b0b45ec89') }}
            </span>
            <el-button
              v-else
              class="set-chief-btn"
              type="text"
              @click.native="setChieflyAddress(scope)">
              {{ $t('crm.components.4a63ea2443bc2283d35581450dc742dc') }}
            </el-button>
            <el-button
              class="set-chief-btn"
              type="text"
              @click.native="editAddress(scope)">
              {{ $t('crm.components.39ba96e673c5e13cd3a10205aa40468e') }}
            </el-button>
            <el-button
              class="set-chief-btn"
              type="text"
              @click.native="cancel(scope)">
              {{ $t('crm.components.6c5b334d0edf01bdd68049940b07480c') }}
            </el-button>
          </flexbox>
        </template>
      </el-table-column>
    </el-table>
    <create
      v-if="isCreate"
      :action="createActionInfo"
      crm-type="customer"
      @save-success="createSaveSuccess"
      @close="isCreate=false" />
  </div>
</template>

<script type="text/javascript">
import Create from './Create'
import {
  crmCustomerQueryAddressByIdAPI,
  crmCustomerSetIsMainAPI,
  crmCustomerCancellationAddressAPI
} from '@/api/crm/customer'
import { getPermissionByKey } from '@/utils'

export default {
  name: 'RelativeAddress', // 相关地址
  components: {
    // CRMFullScreenDetail: () => import('@/components/CRMFullScreenDetail'),
    Create
  },
  mixins: [],
  inject: ['rootTabs'],
  props: {
    // 模块ID
    id: [String, Number],
    // 首要联系人ID
    contactsId: [String, Number],
    // 客户类型
    crmType: {
      type: String,
      default: ''
    },
    // 是公海 默认是客户
    isSeas: {
      type: Boolean,
      default: false
    },
    // 联系人人下 新建商机 需要联系人里的客户信息  合同下需要客户和商机信息
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      nopermission: false,
      list: [],
      fieldList: [],
      tableHeight: '400px',
      // 控制新建
      isCreate: false,
      // 创建的相关信息
      createActionInfo: { type: 'save', crmType: this.crmType, detail: this.detail }
    }
  },
  computed: {
    // 联系人下客户id获取关联商机
    customerId() {
      return this.detail.customerId
    },
    contactsSave() {
      return !!getPermissionByKey('crm.contacts.save')
    }
  },
  watch: {
    id(val) {
      this.list = []
      this.getDetail()
    },

    'rootTabs.currentName'(val) {
      if (val === 'RelativeAddress') {
        this.getDetail(false)
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    /**
     * 表头数据
     */
    getFieldList() {
      this.fieldList.push({ prop: 'addressType', width: '200', label: this.$t('crm.components.e02d3fb86fc39520aea5483a212f7993') })
      this.fieldList.push({ prop: 'postalCode', width: '200', label: this.$t('crm.components.47617e97bc9af9f648dede6fc21f5c15') })
      this.fieldList.push({ prop: 'contactsName', width: '200', label: this.$t('crm.components.4c8e15871049c15adf28d64c271b78e1') })
      this.fieldList.push({ prop: 'telephone', width: '200', label: this.$t('crm.components.bdbbbb33ed8ab0a89d661cdc049dc14c') })
      this.fieldList.push({ prop: 'address', width: '200', label: this.$t('crm.components.792801a26543366ceb98bb7eb5efc259') })
      this.fieldList.push({ prop: 'remark', width: '200', label: this.$t('crm.components.b849fb0daf234300cc9655eb3bafa6d3') })
    },

    /**
     * 获取数据
     */
    getDetail(loading = true) {
      this.loading = loading
      const request = {
        customer: crmCustomerQueryAddressByIdAPI
      }[this.crmType]
      const params = { pageType: 0 }
      params[this.crmType + 'Id'] = this.id
      request(params)
        .then(res => {
          if (this.fieldList.length == 0) {
            this.getFieldList()
          }
          this.nopermission = false
          this.loading = false
          this.list = res.data
        })
        .catch(data => {
          if (data.code == 102) {
            this.nopermission = true
          }
          this.loading = false
        })
    },

    /**
     * 新建
     */
    createClick() {
      //  客户 下新建联系人
      if (this.crmType == 'customer') {
        this.createActionInfo.type = 'save'
      }
      this.isCreate = true
    },
    createSaveSuccess() {
      this.$bus.emit('crm-tab-num-update')
      this.getDetail()
    },

    /**
     * 设置主地址
     */
    setChieflyAddress(data) {
      const request = {
        customer: crmCustomerSetIsMainAPI
      }[this.crmType]

      const params = { addressId: data.row.addressId }
      params[this.crmType + 'Id'] = this.id
      this.loading = true
      request(params)
        .then(res => {
          this.$message.success(this.$t('crm.components.c2994015d6180ace2d85feea683095e6'))
          this.getDetail()
          this.loading = false
        })
        .catch(data => {
          this.loading = false
        })
    },
    /**
     * 删除
     */
    cancel(data) {
      this.$confirm(
        this.$t('crm.components.9287c62bb67001a9fc6e7e678e99d069'),
        this.$t('crm.components.736f705673ee7a1b60599bda8d7a3b0e'),
        {
          confirmButtonText: this.$t('crm.components.4f5c82b09bdab03558d3f2286458c1c3'),
          cancelButtonText: this.$t('crm.components.5856cf8061d298f7aa048180cd201137'),
          type: 'warning'
        }
      )
        .then(() => {
          const params = {
            customerId: this.id,
            addressId: data.row.addressId
          }
          crmCustomerCancellationAddressAPI(params)
            .then(res => {
              this.getDetail()
              this.$message.success(this.$t('crm.components.14505ca063b24bdabe8576cb61372cf7'))
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    /**
    * 编辑地址
    */
    editAddress(scope) {
      this.createActionInfo.type = 'update'
      this.createActionInfo.rowData = scope.row
      this.isCreate = true
    },
    fieldFormatter(row, column, cellValue) {
      // 1 只读 2 读写 3 负责人
      if (column.property === 'addressType') {
        return {
          1: this.$t('crm.components.79a3de5d0adb90ded1008a3af1b12510'),
          2: this.$t('crm.components.e2fa0cc6d64bc1df949b2f009004c36c'),
          3: this.$t('crm.components.19ee26333c9e220aa91e789f8622a49d'),
          4: this.$t('crm.components.7b1936468b31052f9398158c09e51b94'),
          5: this.$t('crm.components.c24bed9f0094d1d89439b91fa3be44ba'),
          6: this.$t('crm.components.f59148a678db6b9d470071bff029d604')
        }[row[column.property]];
      }
      return row[column.property] === '' || row[column.property] === null ? '--' : row[column.property]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/relativecrm.scss";

.set-chief-btn {
  padding: 4px 12px;
}

.chief {
  i {
    margin-right: 3px;
    font-size: 14px;
    color: $--color-g300;
  }
}
</style>
